PageView

  • Code

    In flutter_slidable, the SlidableAction class is used to define custom actions for the Slidable widget. It allows you to create your own custom slide actions to be used within a Slidable.

    1. pubspec.yaml

    
    dependencies:
      flutter:
        sdk: flutter
      flutter_slidable: ^0.6.0
    
    

    2. screen

    
    import 'package:flutter/material.dart';
    import 'package:flutter_slidable/flutter_slidable.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      final List<String> items = List.generate(20, (index) => 'Item ${index + 1}');
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('Slidable Action Example'),
            ),
            body: ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return Slidable(
                  actionPane: SlidableDrawerActionPane(),
                  actionExtentRatio: 0.25,
                  child: ListTile(
                    title: Text(items[index]),
                  ),
                  actions: [
                    SlidableAction(
                      onPressed: (context) {
                        // Handle custom action
                        print('Custom action on item: ${items[index]}');
                      },
                      backgroundColor: Colors.green,
                      foregroundColor: Colors.white,
                      icon: Icons.check,
                      label: 'Complete',
                    ),
                  ],
                  secondaryActions: [
                    IconSlideAction(
                      caption: 'Delete',
                      color: Colors.red,
                      icon: Icons.delete,
                      onTap: () {
                        // Handle delete action
                        print('Deleted item: ${items[index]}');
                      },
                    ),
                  ],
                );
              },
            ),
          ),
        );
      }
    }
    
    
    

    In this example:

    The Slidable widget wraps each ListTile in the ListView.builder.
    Inside Slidable, there's a custom action defined using SlidableAction. This action has a green background, a white icon, and a label of "Complete". When triggered, it prints a message to the console.
    Additionally, there's a secondary action using IconSlideAction to showcase a default slide action.